<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>店铺设计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- bootstrap-css -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/bootstrap.min.css}" >
    <!-- //bootstrap-css -->
    <!-- Custom CSS -->
    <link th:href="@{/lib/merchant/css/style.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/lib/merchant/css/style-responsive.css}" rel="stylesheet"/>
    <!-- font CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!-- font-awesome icons -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/font.css}" type="text/css"/>
    <link th:href="@{/lib/merchant/css/font-awesome.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/lib/merchant/css/morris.css}" type="text/css"/>
    <!-- calendar -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/monthly.css}">
    <!-- //calendar -->
    <!-- //font-awesome icons -->
    <script th:src="@{/lib/merchant/js/jquery2.0.3.min.js}"></script>
    <script th:src="@{/lib/merchant/js/raphael-min.js}"></script>
    <script th:src="@{/lib/merchant/js/morris.js}"></script>
    <style>
        table{
            background: ghostwhite;
            position: relative;
            left: 50%;
            width: 90%;
            transform:translate(-50%,0);
            border: 1px solid whitesmoke;
        }
        td {
            border: 5px solid purple;
            border-radius: 10px;
            color: grey;
        }
    </style>
</head>
<body>
<section id="container">
    <!--header start-->
    <header class="header fixed-top clearfix" th:include="merchant/common/model::header"></header>
    <!--header end-->
    <!--sidebar start-->
    <aside  th:include="merchant/common/model::aside"></aside>
    <!--sidebar end-->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <table style="text-align: center">
                <tr>
                    <td colspan="2">
                        <h4>商户头像（推荐logo长宽比例1:1）</h4>
                        <form th:action="@{/merchant/update-header}" method="post" enctype="multipart/form-data">
                            <!--/*@thymesVar id="lowImg" type="com.example.jieyue.common.entity.SysMtUi"*/-->
                            <img th:src="@{${session.merchant.getHeader()}}" width="240" height="240" onclick="upImg('headerInput')" id="header" style="border-radius: 100%">
                            <input style="display: none;" id="headerInput" type="file" name="img" onchange="showImg(this,'header')">
                            <br/>
                            <input type="submit" value="修改" style="background: purple;border-radius: 5px;color: white">
                        </form>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h4>商城首页的店铺推荐海报（推荐400x320）</h4>
                        <form th:action="@{/merchant/update-home-img}" method="post" enctype="multipart/form-data">
                            <!--/*@thymesVar id="homeImg" type="com.example.jieyue.common.entity.SysMtUi"*/-->
                            <img th:if="${homeImg}!=null" th:src="@{${homeImg.getUrl()}}" width="300" height="240" onclick="upImg('homeInput400')" id="home400">
                            <img th:unless="${homeImg}!=null" th:src="@{/image/user/home/banner/7.jpg}" width="300" height="240" onclick="upImg('homeInput400')" id="home400">
                            <input style="display: none;" id="homeInput400" type="file" name="img" onchange="showImg(this,'home400')">
                            <input type="number" name="width" value="400" hidden>
                            <input type="number" name="height" value="320" hidden>
                            <br/>
                            <input type="submit" value="修改" style="background: purple;border-radius: 5px;color: white">
                            <a style="color: purple" th:if="${homeImg}!=null" th:href="@{/merchant/del-home-img(id=${homeImg.getId()})}">删除</a>
                        </form>
                    </td>
                    <td>
                        <h4>商城首页的店铺推荐海报（推荐600x310,点击图片选择）</h4>
                        <form th:action="@{/merchant/update-home-img}" method="post" enctype="multipart/form-data">
                            <!--/*@thymesVar id="lowImg" type="com.example.jieyue.common.entity.SysMtUi"*/-->
                            <img th:if="${lowImg}!=null" th:src="@{${lowImg.getUrl()}}" width="450" height="235" onclick="upImg('homeInput600')" id="home600">
                            <img th:unless="${lowImg}!=null" th:src="@{/image/user/home/blog/blog1.jpg}" width="450" height="235" onclick="upImg('homeInput600')" id="home600">
                            <input style="display: none;" id="homeInput600" type="file" name="img" onchange="showImg(this,'home600')">
                            <input type="number" name="width" value="600" hidden>
                            <input type="number" name="height" value="310" hidden>
                            <br/>
                            <input type="submit" value="修改" style="background: purple;border-radius: 5px;color: white">
                            <a style="color: purple" th:if="${lowImg}!=null" th:href="@{/merchant/del-home-img(id=${lowImg.getId()})}">删除</a>
                        </form>
                    </td>
                </tr>
            </table>
        </section>
    </section>
    <!--main content end-->
</section>
<script th:src="@{/lib/merchant/js/bootstrap.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{/lib/merchant/js/scripts.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.slimscroll.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.nicescroll.js}"></script>
<script type="text/javascript" th:src="@{/lib/merchant/js/flot-chart/excanvas.min.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.scrollTo.js}"></script>
<!-- morris JavaScript -->
<script>
    $(document).ready(function() {
        //BOX BUTTON SHOW AND CLOSE
        jQuery('.small-graph-box').hover(function() {
            jQuery(this).find('.box-button').fadeIn('fast');
        }, function() {
            jQuery(this).find('.box-button').fadeOut('fast');
        });
        jQuery('.small-graph-box .box-close').click(function() {
            jQuery(this).closest('.small-graph-box').fadeOut(200);
            return false;
        });

        //CHARTS
        function gd(year, day, month) {
            return new Date(year, month - 1, day).getTime();
        }

        graphArea2 = Morris.Area({
            element: 'hero-area',
            padding: 10,
            behaveLikeLine: true,
            gridEnabled: false,
            gridLineColor: '#dddddd',
            axes: true,
            resize: true,
            smooth:true,
            pointSize: 0,
            lineWidth: 0,
            fillOpacity:0.85,
            data: [
                {period: '2015 Q1', iphone: 2668, ipad: null, itouch: 2649},
                {period: '2015 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
                {period: '2015 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
                {period: '2015 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
                {period: '2016 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
                {period: '2016 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
                {period: '2016 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
                {period: '2016 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
                {period: '2017 Q1', iphone: 10697, ipad: 4470, itouch: 2038},

            ],
            lineColors:['#eb6f6f','#926383','#eb6f6f'],
            xkey: 'period',
            redraw: true,
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });


    });
</script>
<!-- calendar -->
<script type="text/javascript" th:src="@{/lib/merchant/js/monthly.js}"></script>
<script>
    function showImg(input,id) {
        var file = input.files[0];
        var reader = new FileReader();

        // 图片读取成功回调函数
        reader.onload = function(e) {
            document.getElementById(id).src=e.target.result
        };
        reader.readAsDataURL(file)
    }
    function upImg(upImg){
        document.getElementById(upImg).click();
    }
</script>
<script type="text/javascript">
    $(window).load( function() {

        $('#mycalendar').monthly({
            mode: 'event',

        });

        $('#mycalendar2').monthly({
            mode: 'picker',
            target: '#mytarget',
            setWidth: '250px',
            startHidden: true,
            showTrigger: '#mytarget',
            stylePast: true,
            disablePast: true
        });

        switch(window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
        }

    });
</script>
<!-- //calendar -->
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:include="merchant/common/model :: alertMsg"></script>
</body>
</html>
